<template>
  <div class="home">
    <!-- 背景图 -->
    <el-carousel height="350px" width="100%">
      <!-- <el-carousel-item>
                <img
                    width="100%"
                     height="350px"
                    src="../assets/images/banner21574221188.jpg"
                    alt
                />
      </el-carousel-item>-->
      <el-carousel-item>
        <img width="100%" height="350px" src="../assets/images/banner31575250900.jpg" alt />
      </el-carousel-item>
      <!-- <el-carousel-item>
                <img
                    width="100%"
                    height="600px"
                    src="../assets/images/0u540mxan1j571.jpg"
                    alt
                />
      </el-carousel-item>-->
    </el-carousel>
    <!-- 推荐列表 -->
    <!-- <homeK></homeK> -->
    <!-- 搜索和点击栏 -->
    <!-- <div class="search">
            <p>
                <span>
          <img src="../assets/images/home/shoucang.png" alt />
          {{$t('message.follow')}}
        </span>
        <span>
          <input v-model="searchBi" :placeholder="$t('message.search')" type="text" />
          <img src="../assets/images/home/shoucang.png" alt />
                </span>

                <span
                    @click="clickTypes(index,item)"
                    v-for="(item,index) in typeName"
                    :key="index"
                    :class="typeNameStatus==index?'active':''"
                >{{item}}</span>
            </p>
    </div>-->

    <!-- 控制表单 -->
    <!-- <div class="form" style="background-color: rgba(70, 63, 130, 0);">
            <p><span>新币榜</span><span>24H涨幅榜</span></p>
            <el-tabs v-model="activeName" type="border-card">
                <el-tab-pane :label="$t('message.newToken')" name="first"></el-tab-pane>
                <el-tab-pane :label="$t('message.rising')" name="second"></el-tab-pane>

                <ul>
                    <el-table
                        :data="tableData4"
                        v-loading="loading"
                        border
                        style="width: 100%;color:#478EE5"
                    >
                        <el-table-column prop="symbol" label="币种" min-width="120"></el-table-column>
                        <el-table-column prop="close" label="最新价" min-width="120">
                            <template slot-scope="scope">
                                <span>{{scope.row.close}} ≈ ￥{{scope.row.close * scope.row.motherRateForCNY | pointCNY}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="riseAndfall" label="24H涨跌幅" min-width="120">
                            <template slot-scope="scope">
                                <span
                                    :class="[scope.row.riseAndfall>0?'greenColor':'redColor']"
                                >{{scope.row.riseAndfall | plusOrMinus}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="high" label="24H最高" min-width="100"></el-table-column>
                        <el-table-column prop="low" label="24H最低" min-width="100"></el-table-column>
                        <el-table-column prop="volume" label="24H成交量" min-width="150"></el-table-column>
                        <el-table-column label="操作" width="100">
                            <template slot-scope="scope">
                                <span @click="clickToBB(scope.row)">详情</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </ul>
            </el-tabs>
    </div>-->

    <!-- 平台优势 -->
    <div class="platform">
      <div style class="Layout">
        <p class="advantagego">专业的一站式数字资产金融服务平台</p>
        <P class="security">致力于为全球用户打造最安全、稳定、高效的数字资产金融服务平台</P>

        <!-- 四张图 -->
        <div class="picture">
          <div v-for="(item,index) in list" :key="index">
            <img :src="item.imgUrl" :alt="item.title" />
            <p>{{ item.title }}</p>
            <p>{{ item.size }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="FullPlatform">
      <div class="FullPlatform_l">
        <p style="font-weight: 700; font-size: 25px;">随时随地 即时交易</p>
        <p style="font-weight: 400; font-size: 20px;">数据专业 &nbsp;&nbsp;&nbsp;开户交易 &nbsp;&nbsp;&nbsp;即时提醒&nbsp;&nbsp;&nbsp;闪电成交</p>
        <img src="../assets/images/home/iphoneX.png" alt />
      </div>
    </div>
  </div>
</template>
<script>
import myecharts from "@/components/myEcharts";
import homeK from "@/components/homeK";
// import {
//   get24hrDataForAll,
//   getMotherCoinName,
//   getKlineDataByIntervalTimeForHttp
// } from "../api/api";
import { setInterval, setTimeout } from "timers";
export default {
  components: {
    myecharts,
    homeK
  },
  data() {
    return {
      typeName: [],
      typeNameStatus: "0",
      // 平台优势数据
      tabPosition: "top",
      tableData4: [],
      loading: true,
      activeName: "second",
      clickTypeName: "BTC", //所选分母币种
      searchBi: "",
      allData: [],
      list: [
        {
          imgUrl: require("../assets/images/home/pic01.png"),
          size: "微秒级高速交易撮合引擎，分层式存储防护，多重验证账户管理机制",
          title: "资金安全保障"
        },
        {
          imgUrl: require("../assets/images/home/pic02.png"),
          size: "用户至上，专业化团队打造产品设计给您最好的交易体验",
          title: "用户体验第一"
        },
        {
          imgUrl: require("../assets/images/home/pic03.png"),
          size: "全球本土化运营，提供多国家语言版本，服务全球用户",
          title: "全球本土化布局"
        },
        {
          imgUrl: require("../assets/images/home/pic04.png"),
          size: "7*24小时多语种客服，随时响应您的需求工单24小时内保证处理",
          title: "7*24小时客服"
        }
      ]
    };
  },
  watch: {
    // searchBi() {
    //     //console.log(this.tableData4);
    //     if (this.searchBi != "") {
    //         var params = [];
    //         this.tableData4.forEach(item => {
    //             if (item.symbol.indexOf(this.searchBi.toUpperCase()) >= 0) {
    //                 params.push(item);
    //             }
    //         });
    //         this.tableData4 = params;
    //     } else {
    //         this.get24hrData();
    //     }
    // }
  },
  created() {
    // this.initget24hrData();
    // this.getMothenBi();
    // setTimeout(() => {
    //     this.get24hrData();
    // }, 5000);
  },
  mounted() {
    // this.initget24hrData();
  },
  methods: {
    start() {
      this.$router.push({ path: "/deal" });
    },
    clickToBB(row) {
      var bb = row.symbol.split("/")[0];
      // console.log(bb)
      // if (bb == "HOB") {
      //     return false;
      // }

      var childName = row.symbol.substring(0, row.symbol.indexOf("/"));
      var mothenName = row.symbol.substring(
        row.symbol.indexOf("/") + 1,
        row.symbol.length
      );
      this.$router.push({
        path: "/deal",
        query: {
          childName: childName,
          mothenName: mothenName,
          name: row.symbol,
          childId: row.childCoin,
          matherId: row.motherCoin
        }
      });
    },
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    clickTypes(index, name) {
      this.typeNameStatus = index;
      this.clickTypeName = name;
      this.get24hrData();
    },
    //获取母币
    getMothenBi() {
      getMotherCoinName().then(res => {
        this.typeName = res.data.data;
        this.clickTypeName = res.data.data[0];
      });
    },
    //获取24h板
    get24hrData() {
      get24hrDataForAll().then(res => {
        // //console.log(res.data.data);
        if (res.data.code == 200) {
          var params = [];
          var paramsTwo = [];
          res.data.data.forEach(item => {
            params.push(item.entity);
          });
          params.forEach(item => {
            var fenMu = item.symbol.substring(
              item.symbol.indexOf("/") + 1,
              item.symbol.length
            );
            if (fenMu == this.clickTypeName) {
              paramsTwo.push(item);
            }
          });
          // //console.log(paramsTwo);
          this.tableData4 = paramsTwo;
        }
      });
    },
    // 初始化
    initget24hrData() {
      get24hrDataForAll().then(res => {
        // //console.log(res.data.data);
        this.allData = res.data.data;
        if (res.data.code == 200) {
          for (var i = 0; i < 5; i++) {
            this.getKNumber(res.data.data[i], i);
          }
          var params = [];
          var paramsTwo = [];
          res.data.data.forEach(item => {
            params.push(item.entity);
          });
          params.forEach(item => {
            var fenMu = item.symbol.substring(
              item.symbol.indexOf("/") + 1,
              item.symbol.length
            );
            if (fenMu == this.clickTypeName) {
              paramsTwo.push(item);
            }
          });
          // //console.log(paramsTwo);
          this.tableData4 = paramsTwo;
          this.loading = false;
        }
      });
    },
    getKNumber(num, index) {
      // //console.log(num)
      var params = {
        childCoinName: num.childCoinName,
        motherCoinName: num.motherCoinName,
        intervalTime: "1day"
      };
      getKlineDataByIntervalTimeForHttp(params).then(res => {
        // //console.log(res.data)
        this.heat[index].ETH = num.childCoinName + "/" + num.motherCoinName;
        for (var i = 0; i < 5; i++) {
          this.heat[index].arr.push(Number(res.data.data[i].volume));
        }
        //console.log(this.heat);
      });
    }
  },
  filters: {
    plusOrMinus(val) {
      if (val > 0) {
        return "+" + val;
      } else {
        return val;
      }
    },
    pointCNY(val) {
      return val.toFixed(2);
    }
  }
};
</script>

<style lang="scss" scoped>
.result {
  height: 35px;
  background-color: #5f569d;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  .result-center {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    div:first-child {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      img {
        margin-right: 15px;
      }
    }
  }
}
#tradingview_31853 {
  height: 500px !important;
}
.redColor {
  color: #eb375d;
}
.greenColor {
  color: #4cdfb0;
}
.home {
  color: #000;
  .lizi {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: -1;
    background: linear-gradient(
      61deg,
      rgba(38, 37, 80, 1),
      rgba(70, 63, 130, 1)
    );
  }
  .title {
    width: 1200px;
    height: 610px;
    margin: 0 auto;
    h1 {
      width: 100%;
      font-size: 32px;
      font-weight: 900;
      line-height: 150px;
      text-align: center;
    }
    p {
      width: 60%;
      margin: 0 auto;
      font-size: 15px;
      font-weight: 500;
      line-height: 25px;
      text-align: center;
    }
    .StartTrading {
      line-height: 310px;
      span {
        font-size: 20px;
        padding: 10px 80px;
        background: linear-gradient(
          87deg,
          rgba(60, 37, 108, 1),
          rgba(69, 127, 208, 1)
        );
        box-shadow: -2px 3px 7px 0px rgba(65, 65, 65, 0.24);
        border-radius: 10px;
      }
    }
    .myecharts {
      width: 50%;
      display: inline-block;
    }
  }
  .heatList {
    width: 1200px;
    // height: 610px;
    margin: 0 auto;
    margin-bottom: 50px;
    li {
      width: 20%;
      box-sizing: border-box;
      > p {
        color: rgba(66, 124, 204, 1);
        font-size: 18px;
        font-weight: 700;
        line-height: 30px;
        img {
          width: 15px;
        }
      }
      div {
        width: 49%;
        float: left;
        box-sizing: border-box;
      }
    }
  }
  .search {
    width: 1200px;
    // height: 610px;
    margin: 40px auto;
    // padding-left: 50px;
    // padding-right: 150px;
    p {
      width: 100%;
      input {
        border: 0px;
        display: inline-block;
        background: rgba(66, 124, 204, 0);
        color: #f2f2f2;
        margin-top: -3px;
      }
      span {
        border: 1px solid #999;
        border-radius: 6px;
        padding: 5px;
        display: inline-block;
        margin-left: 20px;
        img {
          width: 16px;
          margin: 0px 3px;
          margin-right: 5px;
        }
      }
      .active {
        background: rgba(215, 215, 215, 1);
        border: 1px solid rgba(215, 215, 215, 1);
        color: rgba(66, 124, 204, 1);
      }
      .right {
        float: right;
        margin-left: 0px;
      }
    }
  }
  .form {
    width: 1200px;
    // height: 610px;
    margin: 0 auto;
    padding: 10px;
    // box-shadow: 0px 0px 1px #999;
    overflow: hidden;
    ul {
      width: 100%;
      li {
        height: 40px;
        p {
          float: left;
          width: 16.5%;
          // line-height: 30px;
          text-align: center;
          color: rgba(71, 142, 229, 1);
        }
      }
      li:nth-child(1) {
        p {
          color: #f2f2f2;
        }
      }
    }
  }
  //   .advantagego {
  //     text-align: center;
  //     font-weight: 900;
  //     font-size: 26px;
  //     line-height: 230px;
  //   }
  .advantage {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    div {
      width: 30%;
      justify-content: center;
      text-align: center;
      margin: 36px 0px;
      padding: 0px 36px;
      .min_title {
        font-size: 20px;
        font-weight: 700;
        line-height: 50px;
      }
      p {
        text-align: center;
      }
      img {
        width: 15%;

        height: 50px;
        text-align: center;
      }
    }
  }
  .download {
    width: 1200px;
    margin: 0px auto;
    .downloadMain {
      background: #fff;
      margin: 0px;
      margin-top: -20px;
      height: 600px;
      > div {
        float: left;
        height: 100%;
        img {
          margin-left: 190px;
          display: block;
        }
        p {
          width: 50%;
          margin-left: 15%;
          line-height: 30px;
          text-align: left;
        }
        .hear {
          margin-top: 100px;
          line-height: 150px;
          font-weight: 900px;
          font-size: 22px;
          text-align: left;
        }
      }
      div:nth-child(1) {
        width: 40%;
      }
      div:nth-child(2) {
        width: 60%;
      }

      p {
        color: #000;
      }
    }
    > img {
      width: 100%;
    }
  }
}
/deep/.el-table th > .cell {
  padding-top: 0px;
  padding-bottom: 20px;
}
.erweima {
  margin: 10%;
  width: 100px;
  margin-bottom: 2%;
}
.APP {
  font-size: 16px;
  line-height: 25px;
  margin-bottom: 50px;
  margin-left: 10%;
}
.platform {
  background: #ffffff;
  width: 100%;
  height: 100%;
  margin-top: 20px;
  padding-bottom: 100px;
  .advantagego {
    padding-top: 50px;
    font-size: 28px;
    color: #192544;
    text-align: center;
  }
  .security {
    padding-top: 20px;
    font-size: 14px;
    color: #596a7a;
    text-align: center;
    margin-bottom: 50px;
  }

  //   四张图
  .picture {
    display: flex;
    justify-content: space-between;
    color: #000;
    img {
      display: block;
      margin: 0 auto;
      margin-bottom: 20px;
    }
    p {
      text-align: center;
      line-height: 25px;
      //   font-weight: 700;
      font-size: 16px;
      width: 70%;
      margin-left: 15%;
    }
    p:nth-child(1) {
      font-size: 14px;
    }
  }
}
.FullPlatform {
  background: #000 !important;
  padding-top: 60px;
  padding-bottom: 30px;
  .FullPlatform_l {
    width: 60%;
    display: block;
    margin: 0 auto;
    p {
        text-align: center;
        line-height: 50px;
        color: #f2f2f2;
    }
    
    img {
      width: 100%;
      display: block;
      margin: 0 auto;
    }
  }
  .FullPlatform_r {
    width: 50%;
    p {
      padding-left: 50px;
    }
    p:nth-child(1) {
      margin: 20px 0px;
      font-weight: 700;
      font-size: 18px;
      margin-top: 200px;
    }
  }
}
</style>
